<template>
  <div>
    <!-- 三级分类 -->
    <Category :scene="scene"></Category>
    <!-- 属性表格 -->
    <el-card>
      <div v-show="scene == 0">
        <el-button type="primary" icon="Plus" size="default" :disabled="categoryStore.disabled" @click="changeScene">
          添加平台属性
        </el-button>
        <el-table
          :data="attrList"
          v-loading="isLoading"
          element-loading-text="数据加载中……"
          :border="true"
          style="margin-top: 15px"
        >
          <el-table-column label="ID" width="100px" align="center" prop="id"></el-table-column>
          <el-table-column label="属性名称" width="200px" align="center" prop="attrName"></el-table-column>
          <el-table-column label="属性值">
            <template #="{ row }">
              <el-tag v-for="item in row.attrValueList" :key="item.id" style="margin: 10px 10px 0 0">
                {{ item.valueName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template #="{ row }">
              <el-button type="warning" size="small" icon="Edit" @click="changeScene(row)"></el-button>
              <el-popconfirm
                width="200px"
                icon="Delete"
                :title="`确定要删除《${row.attrName}》属性吗`"
                @confirm="deleteAttrHandle(row)"
              >
                <template #reference>
                  <el-button type="danger" size="small" icon="Delete"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
          <template v-slot:empty>
            <el-empty description="暂时没有任何数据" />
          </template>
        </el-table>
      </div>
      <div v-show="scene == 1">
        <el-row justify="space-between">
          <el-col :span="18">
            <el-form :inline="true">
              <el-form-item label="属性名称">
                <el-input v-model="attrParam.attrName" placeholder="请输入属性名称" clearable @change=""></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Plus" @click="addAttrValueHandle" :disabled="!attrParam.attrName">
                  添加属性值
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-row justify="end">
              <el-button type="info" @click="cancelHandle">取 消</el-button>
              <el-button type="primary" @click="submitHandle">提 交</el-button>
            </el-row>
          </el-col>
        </el-row>
        <el-table :data="attrParam.attrValueList" :border="true">
          <el-table-column label="序号" type="index" align="center" width="100px"></el-table-column>
          <el-table-column label="属性值名称">
            <template #="{ row, $index }">
              <el-input
                :ref="(vc: HTMLInputElement) => (inputRefArr[$index] = vc)"
                v-if="row.editMode"
                v-model="row.valueName"
                placeholder="请输入属性值名称"
                clearable
                @blur="onInputBlur(row, $index)"
              ></el-input>
              <div style="height: 32px; line-height: 32px" v-else @click="onDivClick(row, $index)">
                {{ row.valueName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template #="{ $index }">
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                @click="attrParam.attrValueList.splice($index, 1)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="attr">
import { useAttr } from './logic'
import Category from '@/views/product/common/category/index.vue'
const {
  scene,
  isLoading,
  attrList,
  attrParam,
  inputRefArr,
  categoryStore,
  changeScene,
  addAttrValueHandle,
  cancelHandle,
  onInputBlur,
  onDivClick,
  deleteAttrHandle,
  submitHandle
} = useAttr()
</script>

<style scoped lang="scss"></style>
